<template>
  <div id="reviewDetail">
    <div class="select-group">
      <div class="items">
        <span class="items-text">获取时间</span>
        <el-date-picker
          v-model="query.time"
          type="daterange"
          unlink-panels
          value-format='yyyy-MM-dd'
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickOption">
        </el-date-picker>
      </div>
    </div>
    <div class="select-group">
      <div class="items">
        <span class="items-text">批次状态</span>
        <el-select v-model.number="query.isRead" clearable filterable placeholder="请选择">
          <el-option
            v-for="item in readList"
            :key="item.readId"
            :label="item.readName"
            :value="item.readId">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="select-group">
      <div class="items">
        <span class="items-text">文件搜索</span>
        <el-input
          placeholder="请输入文件名"
          v-model="query.folderName">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button size="medium" @click="getList"  type="success" class="el-icon-search"><span style="padding-left:5px;">查询</span></el-button>
      </div>
    </div>

    <el-table empty-text="暂无任何数据信息" :data="list" v-loading.body="listLoading" border fit style="width: 100%">
      <el-table-column align="center" label="ID" >
        <template slot-scope="scope">
          <span>{{scope.row.folderId}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="批次名称">
        <template slot-scope="scope">
          <span v-if="scope.row.isRead == 1" class="point"></span>
          <span :class="scope.row.isRead == 1 ? 'isRead' : ''">{{ scope.row.folderName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数据量">
        <template slot-scope="scope">
          <span>{{scope.row.pushCount}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="获取时间">
        <template slot-scope="scope">
          <span>{{scope.row.pushTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="重单确认倒计时">
        <template slot-scope="scope">
          <span>{{scope.row.checkStatus == '1' ? '未接收' : (scope.row.checkStatus == '3' ? '已确认' : scope.row.countDown )}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button @click="btnEvent(scope.row)" :type="scope.row.checkStatus == '1'? 'success':'primary'" size="small">{{scope.row.checkStatus == '1' ? '确认接收' : '查看' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" :current-page.sync="query.currentPage"
                     :page-sizes="[10,20,30,50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog  width="400px" :visible.sync="visible">
      <div>
        您在查看具体数据时，会将查看回执发送给我司，请在合作协定时间内尽快进行数据查重，
        并将重单数据在系统内进行标记，超过时间则自动视为非重单数据
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消接收</el-button>
        <el-button type="primary" @click="sureCheck">确认并查看</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getReviewList , checkFolder } from '@/api/dataReview';
  import { mapGetters } from 'vuex'
  export default {
    name: "dataReview",
    data(){
      return {
        visible:false,
        listLoading:false,
        total:0,
        list:[],
        query: {
          orgId:"",
          // orgId:this.updateInfo.orgId,
          time: [],
          folderName:'',
          pageSize:10,
          currentPage:1,
          isRead:null
        },
        readList:[
          {readId:1,readName:'未读'},
          {readId:2,readName:'已读'},
        ],
        pickOption: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created(){
      this.query.orgId = this.updateInfo.orgId;
    },
    mounted(){
      this.getList();
    },
    computed: {
      ...mapGetters([
        'updateInfo'
      ])
    },
    methods:{
      sureCheck(){
        checkFolder({folderId:this.currentFolderId,checkStatus:2}).then(v=>{
          this.visible = false; //关闭弹框
          this.$router.push({ path: '/dataReview/detail?folderId='+this.currentFolderId })
        }).catch(v=>{
          this.$message.error(v)
        })
      },
      btnEvent(rowData){
        this.currentFolderId = rowData.folderId
        if(rowData.checkStatus == '1'){
          //弹出弹框
          this.visible = true;
        }else{
          this.$router.push({ path: '/dataReview/detail?folderId='+rowData.folderId })
        }
      },
      getList(){
        this.listLoading = true;
        getReviewList(this.query).then(response => {
          const temp = response.data;
          this.total = temp.totalRecord;
          this.list = temp.dataList && temp.dataList.length ? temp.dataList : [] ;
          this.listLoading = false;
        }).catch(res=>{
          this.listLoading = false
          this.$message.error(res)
        })
      },
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getList()
      },
      handleCurrentChange(val){
        this.query.currentPage = val
        this.getList()
      },
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';
  #reviewDetail {
    .point {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 50%;
      background-color: $mainBuleColor;
    }
    span.isRead {
      font-weight: 700;
      color:$mainBuleColor;
    }
  }
</style>
